<template>
  <div>
    <nav-bar :title="title" :isShow="false"></nav-bar>
    <van-cell title="通讯录查询" icon="search" />
    <van-form @submit="onSubmit">
      <van-field
        v-model="unit_name"
        name="unit_name"
        label="单位名称"
        placeholder="输入查询单位"
      />
      <van-field
        v-model="dept_name"
        name="dept_name"
        label="部门名称"
        placeholder="输入查询部门"
      />
      <van-field
        v-model="name"
        name="name"
        label="姓名"
        placeholder="输入查询姓名"
      />
      <div style="margin: 16px;">
        <van-button round block type="info" native-type="submit">查询</van-button>
      </div>
    </van-form>
    <van-cell title="查询结果" icon="smile-o" v-if="this.contacts.length>0" :value="'共'+ count +'条'"/>
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <van-cell-group v-for="item in contacts" :key="item.id" :title="item.unit_name + '  '  +item.dept_name">
        <van-cell :title="item.name||item.dept_name" :value="item.office_tel" :label="member_role==1&&item.telephone" />
      </van-cell-group>
    </van-list>
  </div>
</template>

<script>
import NavBar from "@/components/NavBar"
import { contact, contact_next } from '@/api/service'

export default {
  name: "Contact",
  components: {
    NavBar
  },

  data() {
    return {
      title: this.$route.meta.title,
      openid: "",
      name: "",
      unit_name: "",
      dept_name: "",
      contacts: [],
      loading: false,
      finished: false,
      next: null,
      count: 0,
    };
  },
  computed:{
      member_role(){
         if(+sessionStorage.getItem("member_role") === 1 || +sessionStorage.getItem("member_role") === 3){
           return 1
         }else{
           return 0
         }
      }
  },
  methods: {
    onSubmit(values) { 
      this.finished = false 
      console.log("onsubmit:", values)
      if(values.unit_name === "" && values.dept_name === "" && values.name === ""){
        this.$toast('请输入查询条件');
        return;
      }
      this.contacts = []
      this.getContacts(values)   //增加
      
    },
    getContacts(params){
        contact(params).then(res=>{
          console.log(res.data);
          this.next = res.data.next
          this.contacts = res.data.results;
          this.loading = false
          this.count = res.data.count
          if(!this.next){
            this.finished = true
          }
        }).catch(error => {
          if (error.response) {
            console.log(error.response.data);
          } else if (error.request) {
            console.log(error.request);
          } else {
            console.log('Error', error.message);
          }
          console.log(error.config);
        })
    },
    onLoad() {
      console.log("0000000000000000000");
      if(!this.next){
        this.loading = false;
        return
      }
      contact_next(this.next).then(res => {
        console.log(res.data);
        this.next = res.data.next
        this.contacts.push.apply(this.contacts, res.data.results)
        this.loading = false;
        if(!this.next){
          this.finished = true;
        }
      }).catch(error => {
        console.log(error.message);
      })
    },

  },
  created() {
  },
};
</script>

<style  scoped>
</style>